<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery</title>


<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript">
//body on load
$(function() {
	var taux = 1.32;
	
	$("#btnClick").click(function(){
		maFonction();
	});

	$("#txtEuro").keyup( function(){
		$("#txtDollar").val(  $("#txtEuro").val()  * taux )  ;
	});

	$("#txtDollar").keyup( function(){
		$("#txtEuro").val(  $("#txtDollar").val()  / taux )  ;
	});

	$(".petite").css("width", "100px");
	$("#grande").css("width", "400px");
	
	$(".petite").mouseover( function(){
		$("#grande").hide();
		$("#grande").attr("src", $(this).attr("src") );
		$("#grande").show(1000);

	});
	
});

function maFonction() {
	alert("saisie: " + $("#txtSaisie").val() );
}
</script>

</head>

<body>

	<span>Saisie: </span>
	<input type="text" id="txtSaisie" />
	<input type="button" value="Click" id="btnClick" />
	<hr/>

	<span>€</span>
	<input type="text" id="txtEuro" />
	<span>$</span>
	<input type="text" id="txtDollar" />
	<hr/>
	
	<table id="tableImage">		
		<tr>
			<td> <img src="images/Jellyfish.jpg" class="petite" />  </td>
			<td> <img src="images/Koala.jpg" class="petite" />  </td>
			<td> <img src="images/Penguins.jpg" class="petite" />  </td>
			<td> <img src="images/Tulips.jpg" class="petite" />  </td>
		</tr>
		<tr>
			<td colspan="4">
				<img alt="" src="images/Koala.jpg" id="grande" />
			<td>
		</tr>
	</table>	
		
</body>
</html>


